import React, { useState } from 'react'
import style from "./css/index.module.css"
import { reqUserList } from '@/api';

export default function Header({setUserList,setIsSearch,setIsSearching}) {

  //数据1:搜索表单的数据绑定
  const [searchKey,setSearchKey] = useState('')

  //方法1:收集搜索表单数据的方法
  const getSearchKey= (e)=>{
    setSearchKey(e.target.value)
    // console.log(e.target.value);
  }

  //方法2:搜索按钮的事件回调函数
  const search =async ()=>{
    //判断搜索的内容是否为空
    if(!searchKey) return

    //把控制是否已经搜索的数据改为true
    setIsSearch(true);

    //发送ajax请求得到搜索结果
    try {
      //因为拦截器中如果失败,就会返回失败的promise,我们需要使用trycatch来捕获异常
      const res  = await reqUserList()
      console.log(res);

      //调用父组件传递的修改userList的方法,把数据交给App组件保管
      setUserList(res.items)

      //请求完成把控制是否正在搜索的数据改为false
      setIsSearching(false)

    } catch (error) {
      alert(error.message)
    }
  }
  return (
    <div className={style.outer}>
      <input type="text" value={searchKey} onChange={getSearchKey} />
      <button onClick={search}>搜索</button>
    </div>
  )
}
